<template>
  <div>
    <button>123</button>
    <input placeholder="有缓存" v-model="form.text" type="text" />
    <input placeholder="有缓存" v-model="form.text2" type="text" />
    <input placeholder="有缓存" v-model="text3" type="text" />
    <input placeholder="无缓存" v-model="text4" type="text" />
    <RouterView />
  </div>
</template>

<script setup>
import { useCache } from "@/hooks/useCache";

const form = ref({
  text: "",
  text2: "",
});

const text3 = ref("");
const text4 = ref("");

// 要缓存的数据
const formatCacheData = () => {
  return {
    ...form.value,
    text3: text3.value,
  };
};
const { cacheData } = useCache({ formatCacheData });
onMounted(() => {
  if (Object.keys(cacheData).length > 0) {
    console.log("使用缓存");
    form.value = cacheData;
    text3.value = cacheData.text3;
  }
});
</script>
